<template>
	<view :class="show?'main':''">

		<view>
			<image class="package_mianimg" :src="obj.src"></image>
		</view>
		<view class="center">
			<view class="messagebox">
				<text>{{obj.title}}</text>
				<text>￥{{obj.price}} 起</text>
			</view>
			<view @click="open('服务说明')">
				<view class="message_header">
					<text>服务/交付标准</text>
					<image
						src="http://m.qpic.cn/psc?/V50sCALs4B1NTU1z389N4Xr59V2fkY7X/ruAMsa53pVQWN7FLK88i5huEq.Xs7zt6UcDbsUdhrJ8*0U3jxO2k3jfRAA39WpukYdSTcaYlfC0EmbJBiOGP4.0uZ4257gkzlfYLsYeCaSE!/b&bo=HAAmAAAAAAADBxg!&rf=viewer_4">
					</image>
				</view>
				<view class="message_img">
					<view class="midbox">
						<view class="imgbox">
							<image
								src="http://m.qpic.cn/psc?/V50sCALs4B1NTU1z389N4Xr59V2fkY7X/ruAMsa53pVQWN7FLK88i5g8GqkRdwdig53bfBq3wAaBtCnmjzAvSU0qgFWoL4sBcW8oPeUrXUVZgUrVyPtb5jxokyDO0mtUUYSQC1YC9UOQ!/b&bo=QABAAAAAAAADByI!&rf=viewer_4">
							</image>
						</view>
						<text>一组造型</text>
					</view>
					<view class="midbox">
						<view class="imgbox">
							<image
								src="http://m.qpic.cn/psc?/V50sCALs4B1NTU1z389N4Xr59V2fkY7X/ruAMsa53pVQWN7FLK88i5g8GqkRdwdig53bfBq3wAaA8lrGiIX9syDD40A8TcoKn1wJL6Gmop6ivTBVUWAQsPZs2w4Wqw1DObkb768rbN6M!/b&bo=QABAAAAAAAADByI!&rf=viewer_4">
							</image>
						</view>
						<text>一套服装</text>
					</view>
					<view class="midbox">
						<view class="imgbox">
							<image
								src="http://m.qpic.cn/psc?/V50sCALs4B1NTU1z389N4Xr59V2fkY7X/ruAMsa53pVQWN7FLK88i5kQomn7WJMw3qQS7rLvI5S0u.ywG7*MIMNWecIoBoRReHMe6PrgWckqwOcr3QZJvgtQ3tjL3bCvGBC.oPlW.zW0!/b&bo=SAA.AAAAAAADB1Q!&rf=viewer_4">
							</image>
						</view>
						<text>一种背景</text>
					</view>
					<view class="midbox">
						<view class="imgbox">
							<image
								src="http://m.qpic.cn/psc?/V50sCALs4B1NTU1z389N4Xr59V2fkY7X/ruAMsa53pVQWN7FLK88i5kQomn7WJMw3qQS7rLvI5S0p4JfCc9khtpHX14fUkRW849gApJ9k4K9SNKkDbyhderiV1PnhVQgcIMaHiJSJu3Y!/b&bo=QABAAAAAAAADByI!&rf=viewer_4">
							</image>
						</view>
						<text>一张精修底片</text>
					</view>
				</view>
			</view>
			<view>
				<view class="message_header">
					<view>
						<image class="shoppimg"
							src="http://m.qpic.cn/psc?/V50sCALs4B1NTU1z389N4Xr59V2fkY7X/ruAMsa53pVQWN7FLK88i5huEq.Xs7zt6UcDbsUdhrJ9hhJmB3PqEJR.tKV5OeiONogdNnREZ5ZPtfNTSkAV6mqBGekvrNw4rKMpZHzXHaj0!/b&bo=HgAeAAAAAAADByI!&rf=viewer_4">
						</image> <text>套餐推荐</text>
					</view>
				</view>
				<view style="margin: 30rpx 0rpx;" class="midtcbox">
					<view class="tcbox" v-for="item in taocan" :key="item.id">

						<image class="tcimg" :src="item.src"></image>
						<view class="tcxqbox">
							<view style="width: 250rpx;">
								<!-- {{item}} -->
								<text>{{item.title}} </text>
								<text style="margin-left:10rpx;float: right;">￥{{item.price}}</text>
							</view>
							<text>

								<text style="color:lightgray;">套餐立减￥{{item.jian}}</text>
							</text>
						</view>
						<button class="tcbtn" @click="()=>{
									activetc=item
									open()
								}">选择套餐</button>

					</view>
				</view>
			</view>
			<view>
				<view style="display: flex;justify-content: space-between;">
					<text>产品详情</text>
					<text>服务说明</text>
					<text>客片秀场</text>
				</view>

				<view>
					<!--图片-->
				</view>
				<view class="fuwu">
					<text>服务说明</text>
				</view>
				<fuwuVue :bgcolor="'whitesmoke'"></fuwuVue>
				<view class="fuwu">
					<text>客片秀</text>
				</view>

				<view class="kepian">
					<view class="kepianbox" @click="navjx" v-for=" item in [1,2,3,4,5,6]" :key="item">
						<image :src="obj.src" />
						<text class="typetxt">产品类型：The Girl-单人</text>
						<text>爱自己的一百种方式</text>
						<text>落*</text>
					</view>
				</view>
			</view>
		</view>

		<popupmax :show="show" :closeshow="closeshow">
			<template v-slot:title>
				<text>
					{{title}}
				</text>
			</template>
			<template v-slot:content>
				<changetc v-if="activetc&&nowstep==='changetc'" :obj="activetc" :next="changetimeprop"
					:settcobj="settcobj"></changetc>
				<changetime v-else-if="nowstep==='changetime'" :next="changetimeprop" :lasttcobj="lasttcobj"
					:settcobj="settcobj"></changetime>
				<anthertime v-else-if="nowstep==='anthertime'" :next="changetimeprop" :lasttcobj="lasttcobj"
					:settcobj="settcobj"></anthertime>
				<submit v-else-if="nowstep==='submit'" :userobj="userobj" :lasttcobj="lasttcobj"></submit>
				<fuwuVue v-else :bgcolor="'white'"></fuwuVue>
			</template>
		</popupmax>
	</view>

</template>

<script setup lang="ts">
	import { onMounted, ref } from 'vue';
	import popupmax from './component/popup.vue'
	import fuwuVue from './component/fuwu.vue';
	import changetc from './component/changetc.vue'
	import changetime from './component/changetime.vue'
	import anthertime from './component/anthertime.vue'
	import submit from './component/submit.vue'
	import request from "../../components/promise/promise";

	let obj = ref({})

	let activetc = ref(null)
	let userobj = ref({
		_id: '6641b31df907eb697e3739e1',
		name: '小乔',
		birthday: '2023-5-10',
		sex: '女',
		phone: '18617763392'
	})
	let taocan = ref([

	])
	let show = ref(false)
	let title = ref('')
	let nowstep = ref('')
	let lasttcobj = ref({})
	let settcobj = (obj : any) => {
		lasttcobj.value.tc = activetc
		lasttcobj.value.title = obj.title
		lasttcobj.value.time = obj.time
		lasttcobj.value.minute = obj.minute

	}
	let closeshow = () => {
		show.value = false
		activetc.value = null
		nowstep.value = ''
	}
	let open = (txt : any) => {
		if (!txt) {
			title.value = '选择' + activetc.value.title + '产品'
			nowstep.value = 'changetc'

		} else {
			title.value = txt
		}
		show.value = true

	}
	let changetimeprop = (txt : any) => {
		nowstep.value = txt
		title.value = ''
	}
	let gettaocanlist = async () => {
		let { data } = await request({ url: "http://47.93.162.7:3000/gettaocan" })

		for (let i = 0; i < data.taocanlist.length; i++) {

			if (taocan.value.length === 3) {
				break
			}
			let index = Math.floor(Math.random() * data.taocanlist.length)
			let i = taocan.value.findIndex(ele => ele._id === data.taocanlist[index]._id)
			if (i === -1) {
				taocan.value.push(data.taocanlist[index])
			}
		}
	}
	let navjx=()=>{
		uni.navigateTo({
			url:'/pages/index/lookimg'
		})
	}
	onMounted(() => {
		gettaocanlist()
		const stobj = JSON.parse(uni.getStorageSync('obj'))
		obj.value = { ...stobj }
		uni.$on('checkuser', (user) => {
			console.log(user)
			userobj.value = user
		})

	})
</script>

<style lang="scss">
	.main {
		overflow: hidden;
		height: 1100rpx;
	}

	.tcxqbox text {
		font-size: 26rpx;

		line-height: 50rpx;
	}

	.tcbtn {
		margin-top: 12rpx;
		width: 45%;
		background: white;
		border-radius: 50rpx;
		border: 1px solid black;
		height: 70rpx;
		line-height: 70rpx;
		font-size: 30rpx;
		margin-left: 80rpx;
	}

	.tcbox {
		display: flex;
		justify-content: space-between;
		padding: 25rpx 10rpx;
	}

	.tcbox:nth-child(2) {
		border: 1px solid lightgray;
		border-left: none;
		border-right: none;
	}

	.tcimg {
		width: 100rpx;
		height: 100rpx;
		margin-right: 10rpx;
	}

	.kepianbox text:nth-child(4) {
		font-size: 29rpx;
	}

	.kepianbox text:nth-child(3) {
		font-size: 29rpx;
	}

	.kepianbox text {
		margin-left: 26rpx;
	}

	.typetxt {
		font-size: 25rpx;
		font-weight: 100;
	}

	.kepianbox image {
		width: 100%;
		height: 350rpx;
	}

	.kepianbox {
		margin-bottom: 20rpx;
		line-height: 50rpx;
		width: 48%;
		display: flex;
		flex-direction: column;
		box-shadow: 0 0 10rpx darkgray;
	}

	.kepian {

		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
	}

	.fuwu {
		text-align: center;
		/* border: 1px solid black; */
		margin: 50rpx 0rpx;

	}

	.message_header .shoppimg {
		width: 40rpx;
		height: 40rpx;
		margin-top: 10rpx;
		font-size: 30rpx;
		vertical-align: bottom;
		margin-right: 10rpx;
	}

	.package_mianimg {
		width: 100%;
		height: 800rpx;
	}

	.center {
		background: white;
		border-radius: 50rpx 50rpx 0rpx 0rpx;
		position: relative;
		top: -70rpx;
		padding: 40rpx 30rpx;
	}

	.messagebox,
	.message_header,
	.message_img {
		display: flex;
		justify-content: space-between;
		width: 100%;
		margin-bottom: 20rpx;
	}

	.message_header image {
		width: 26rpx;
		height: 26rpx;
		margin-top: 10rpx;
	}

	.message_header>text {
		font-size: 26rpx;
		font-weight: 700;
	}

	.imgbox image {
		width: 80rpx;
		height: 75rpx;
	}

	.midbox {
		display: flex;
		flex-direction: column;
		align-items: center;

	}

	.midbox text {
		font-size: 26rpx;
	}

	.imgbox {
		padding: 20rpx;
		border-radius: 100rpx;
		background: whitesmoke;
		margin: 20rpx 0rpx;
	}
</style>